<template>
	<div class="chat_header">
		<div class="h_left">
			<!-- <img :src="logo" width="44" /> -->
			<logo width="2.75rem" height="2.75rem"></logo>
			<span>鸡小蟹</span>
		</div>
		<div class="h_right">
			<div @click="openSetting">
				<SettingIcon width="1.5rem" height="1.5rem" />
			</div>
			<div @click="mini">
				<ZuiXiaoHua width="1.5rem" height="1.5rem" />
			</div>
			<!-- <img :src="settingImg" width="24" /> -->
			<!-- <img :src="miniImg" width="24" /> -->
		</div>
	</div>
</template>
<script>
// import logo from '@/assets/images/chat/xiaoxie.svg'
import Logo from '@/components/svg/logo.vue'
// import settingImg from '@/assets/images/chat/shezhi.svg'
import SettingIcon from '@/components/svg/shezhi.vue'
// import miniImg from '@/assets/images/chat/zuixiaohua.svg'
import ZuiXiaoHua from '@/components/svg/zuixiaohua.vue'
export default {
	components: {
		Logo,
		SettingIcon,
		ZuiXiaoHua
	},
	data() {
		return {}
	},
	methods: {
		openSetting() {
			chrome.webview.hostObjects.form.OnPageEvent('openSettingsPage')
		},
		mini() {
			chrome.webview.hostObjects.form.OnPageEvent('min')
		}
	}
}
</script>
<style lang="less" scoped>
.chat_header {
	display: flex;
	align-items: flex-start;
	padding: 1.5rem 1.56rem;
	background-image: linear-gradient(180deg, rgba(255, 254, 254, 0) 0%, #ffffff 88%);
	background: var(--chat-header-bg);
	background-size: cover;
	height: 21rem;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	app-region: drag;
	.h_left {
		display: flex;
		align-items: center;
		span {
			margin-right: 0.5rem;
		}
		span {
			font-family: PingFangSC-Semibold;
			font-size: 1.25rem;
			color: var(--chat-header-color);
			letter-spacing: 0;
			font-weight: 600;
		}
	}
	.h_right {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-top: 0.625rem;
		app-region: no-drag;
		span {
			cursor: pointer;
			margin-left: 0.75rem;
		}
	}
}
</style>
